import { Component, OnInit ,Input,SimpleChanges,ElementRef,ViewChild} from '@angular/core';

@Component({
  selector: 'el-col',
  templateUrl: './el-col.component.html',
  styleUrls: ['./el-col.component.css','./col.css']
})
export class ElColComponent implements OnInit {

    private gutter:number
    style={
        pdLeft:'',
        pdRight:''
    }

    @Input() span:Number=24;
    @Input() offset:Number=0;
    @Input() pull:Number=0;
    @Input() push:Number=0;
    @Input() xs:any;
    @Input() sm:any;
    @Input() md:any;
    @Input() lg:any;
    

    @ViewChild('self') self:ElementRef
    constructor() { }

    ngOnInit() {
       
        // this.setClass()
    }
    
    ngOnChanges(){
        this.setClass()
    }



    setClass(){
        var classList=['el-col'];
        ['span','offset','pull','push'].forEach(prop=>{
            if(this[prop]){
                classList.push(prop!=='span'?`el-col-${prop}-${this[prop]}`:`el-col-${this[prop]}`)
            }
        });

        ['xs','sm','md','lg'].forEach(size=>{
            if(typeof this[size]==='number'){
                classList.push(`el-col-${size}-${this[size]}`)
            }else if(typeof this[size]==='object'){
                let props=this[size];
                Object.keys(props).forEach(prop=>{
                    classList.push(prop!=='span'?`el-col-${size}-${prop}-${props[prop]}`:`el-col-${size}-${props[prop]}`)

                })
            }
        })

        this.self.nativeElement.className=classList.join(' ')
    }

    getGutter(){
        var el_row=this.self.nativeElement.parentNode;

        while(el_row.tagName!=='EL-ROW'){
            el_row=el_row.parentNode;
        }
        this.gutter=el_row.getAttribute('ng-reflect-gutter');
        if(this.gutter){
            this.self.nativeElement.style.paddingLeft=this.gutter/2+'px';
            this.self.nativeElement.style.paddingRight=this.gutter/2+'px';
        }

        
    }

    ngDoCheck(){
        
        this.getGutter()
    }


    

}
 